<html>
  <head>
  <title>GWTStationModel</title>
  <script language="javascript" src="http://www.google.com/jsapi"></script>
  <script language="javascript" src="gwtstationmodel/gwtstationmodel.nocache.js"></script>
  <style type="text/css">
    body {
      font-family: sans-serif;
      font-size: smaller;
    }
    h3 {
      margin-top:1em;
      margin-left:1em;
    }
    .formlabel {
      width:10em;
      float:left;
      margin-left:1em;
    }
    </style>
  </head>
  
  <body>
    <h3>GWTStationModel</h3>
    
    <form action="">
    <div class="formlabel">Knots:</div>
    <input id="knots" type="text" onkeyup="drawVisualization()" name="knots" value="75"/><br />
    <div class="formlabel">Degrees:</div>
    <input id="degrees" type="text" onkeyup="drawVisualization()" name="degrees" value="45"/><br />
    <div class="formlabel">Color:</div>
    <input id="color" type="text" onkeyup="drawVisualization()" name="color" value="#336699"/><br />
    <div class="formlabel">Size:</div>
    <input id="size" type="text" onkeyup="drawVisualization()" name="size" value="100"/><br />
    </form>

    <div id="mydiv"></div>
    
    <script type="text/javascript">
      // Two modules to load (Google Visualization API and the GWTStationModel)
      var num_modules = 2;
      var stationModel;
      
      // This function will be called after each module was loaded.
      function onLoadCallback() {
        // Render the visualization if this was the last module.
        if (--num_modules == 0) { 
            stationModel = new StationModelVisualization(document.getElementById('mydiv'));
            drawVisualization();   
        }
      }
        
      function drawVisualization() {
        var data = new google.visualization.DataTable();

        var knots = parseFloat(document.getElementById('knots').value);
        var degrees = parseFloat(document.getElementById('degrees').value);
        var size = parseInt(document.getElementById('size').value);
        var color = document.getElementById('color').value;
        
        data.addColumn('number', 'knots');
        data.addColumn('number', 'degrees');
        data.addRows(1);
        data.setCell(0, 0, knots);
        data.setCell(0, 1, degrees);

        stationModel.draw(data, {shaftLength: size, barbColor: color});

      }

      google.load("visualization", "1");
      google.setOnLoadCallback(onLoadCallback);
    </script>
  </body>
</html>
